<!--组件：字段信息编辑-->
<!--created by lx 2023/6/13-->
<template>
  <div>
    <a-table
      :columns="COLUMNS"
      :data="fieldList"
      row-key="id"
      :pagination="false"
      :scroll="{ x: 1500, y: 400 }"
    >
      <!--插槽（通用）：普通输入框-->
      <template #inputBox="{ rowIndex, column }">
        <a-input v-model="fieldList[rowIndex][column.dataIndex]" />
      </template>

      <!--插槽（通用）：多选框-->
      <template #checkBox="{ rowIndex, column }">
        <a-checkbox v-model="fieldList[rowIndex][column.dataIndex]" />
      </template>

      <!--插槽：Json属性=javaType-->
      <template #javaType="{ rowIndex }">
        <a-select
          v-model="fieldList[rowIndex].javaType"
          :options="JAVA_TYPES"
        />
      </template>

      <!--插槽：查询方式=listOperationCondition-->
      <template #searchCondition="{ rowIndex }">
        <a-select
          v-model="fieldList[rowIndex].listOperationCondition"
          :options="SEARCH_CONDITIONS"
        />
      </template>

      <!--插槽：显示类型=htmlType-->
      <template #htmlType="{ rowIndex }">
        <a-select
          v-model="fieldList[rowIndex].htmlType"
          :options="HTML_TYPES"
        />
      </template>

      <!--插槽：字典类型=dictType-->
      <template #dictType> TODO!! </template>
    </a-table>
    <a-space style="margin-top: 24px">
      <a-button @click="back">返回</a-button>
      <a-button type="primary" @click="save">保存</a-button>
    </a-space>
  </div>
</template>

<script setup lang="ts" name="ColumnsInfoEdit">
  import { TableColumnData } from '@arco-design/web-vue';
  import { ref, watch } from 'vue';

  const props = defineProps({
    columns: { type: Array, default: () => [] },
  });
  const emits = defineEmits(['back', 'save']);
  const fieldList = ref<any[]>([]);
  const COLUMNS: TableColumnData[] = [
    {
      title: '序号',
      align: 'center',
      dataIndex: 'index',
      width: 70,
      render: ({ rowIndex }) => rowIndex + 1,
      fixed: 'left',
    },
    {
      title: '字段列名',
      dataIndex: 'columnName',
      width: 100,
      tooltip: true,
      ellipsis: true,
    },
    {
      title: '字段描述',
      dataIndex: 'columnComment',
      width: 130,
      slotName: 'inputBox',
    },
    {
      title: '物理类型',
      dataIndex: 'dataType',
      width: 100,
      tooltip: true,
      ellipsis: true,
    },
    {
      title: 'Json类型',
      dataIndex: 'javaType',
      width: 130,
      slotName: 'javaType',
    },
    {
      title: 'Json属性',
      dataIndex: 'javaField',
      width: 130,
      slotName: 'inputBox',
    },
    {
      title: '插入',
      dataIndex: 'createOperation',
      width: 60,
      slotName: 'checkBox',
    },
    {
      title: '编辑',
      dataIndex: 'updateOperation',
      width: 60,
      slotName: 'checkBox',
    },
    {
      title: '列表',
      dataIndex: 'listOperation',
      width: 60,
      slotName: 'checkBox',
    },
    {
      title: '查询',
      dataIndex: 'listOperationResult',
      width: 60,
      slotName: 'checkBox',
    },
    {
      title: '查询方式',
      dataIndex: 'listOperationCondition',
      width: 130,
      slotName: 'searchCondition',
    },
    {
      title: '允许为空',
      dataIndex: 'nullable',
      align: 'center',
      width: 90,
      slotName: 'checkBox',
    },
    {
      title: '显示类型',
      dataIndex: 'htmlType',
      width: 130,
      slotName: 'htmlType',
    },
    {
      title: '字典类型',
      dataIndex: 'dictType',
      width: 100,
      slotName: 'dictType',
    },
    { title: '示例', dataIndex: 'example', width: 150, slotName: 'inputBox' },
  ];

  const JAVA_TYPES = [
    'Long',
    'String',
    'Integer',
    'Double',
    'BigDecimal',
    'LocalDateTime',
    'Boolean',
  ];
  const SEARCH_CONDITIONS = [
    '=',
    '!=',
    '>',
    '>=',
    '<',
    '<=',
    'LIKE',
    'BETWEEN',
  ];
  const HTML_TYPES = [
    { label: '输入框', value: 'input' },
    { label: '文本域', value: 'textarea' },
    { label: '选择器', value: 'select' },
    { label: '单选框', value: 'radio' },
    { label: '复选框', value: 'checkbox' },
    // TODO: 不提供上传、富文本
    // 缺少树形、级联、数据字典
    // 日期选择器用法不同
    // 需要单独提供密级、文件上传
    { label: '日期选择器', value: 'datetime' },
    // { label: '上传', value: '' },
    // { label: '富文本', value: '' },
  ];

  const initColumnList = () => {
    fieldList.value = props.columns;
  };

  watch(
    () => props.columns,
    () => {
      initColumnList();
    }
  );

  const back = () => {
    emits('back');
  };
  const save = () => {
    emits('save', fieldList.value);
  };
</script>
